<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import lightOn from '../assets/lightOn.svg'
import lightOff from '../assets/lightOff.svg'


  console.log(2333);
  const msg = ref('cxk666')

  const count = ref(0);

  const studentList = ref([
    { name: '蔡徐坤', age: 18 },
    { name: 'cxk2', age: 28 },
    { name: 'cxk3', age: 68 },
    { name: 'cxk4', age: 88 },
    { name: 'cxk5', age: 668 },
  ])

  const totalAge = computed(() => {
    return studentList.value.reduce((acc, cur) => acc + cur.age, 0);
  });

  watch(()=>studentList, (newValue, oldValue) => {
    console.log(newValue, oldValue);
  },{ deep: true})

  let isOn = ref(true)
  const obj = {
    name: 'cxk',
    age: 18,
    hobby: 'ctrl'
  }

  let username = ref('')
  let password = ref('')


</script>

<template>
  <div>

    <div v-if="count > 10">
      分数为{{ count  }}
    </div>

    <input type="text" v-model="count">

    <div v-if="count > 90">恭喜恭喜~获得>90分</div>
    <div v-else-if="count > 80">恭喜恭~获得>80分</div>
    <div v-else-if="count > 60">恭喜~获得>60分</div>
    <div v-else>sb~</div>
    
    <div>学生总年龄{{totalAge}}</div>

    <div v-for="(item,index) in studentList" :key="index" class="student-list-item">
      <div>{{item.name}} {{item.age}}</div>
      <button @click="item.age += Math.ceil(Math.random()*10)">年龄随机加(1-10)</button>
    </div>

    <button :style="{
      backgroundColor : isOn ? 'red' : 'green',
      color:isOn ? 'black' : 'white'
      }" @click="isOn = !isOn">
      {{isOn ? '关灯' :'开灯'}}
    </button>
    <img :class="{light:true}" :src="isOn ? lightOn : lightOff" alt="图片无法显示">


    <ol>
      <li v-for="item in 6">测试循环</li>
    </ol>
    <ul>
      <li v-for="item in 4">{{item}}</li>
    </ul>

    <ul>
      <li v-for="(v,k,i) in obj">{{i}} - {{v}} : {{ k }}</li>
    </ul>

    <input type="text" v-model="username"><br>
    <p>{{username}}</p>
    <input type="text" v-model="password"><br>
    <p>{{password}}</p>

  </div>
</template>

<style scoped>
  *{
    color: green;
  }

  .light{
    width: 50px;
    height: 50px;
  }

  .student-list-item{
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    background-color: #eee;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all .5s;
  }
</style>